First cut at activities overlay

When the user clicks on "Activities", adjust the input shape
to the whole screen and show a black overlay group. Actually, the
black should be *beneath* the window actors and the overlay group
transparent so we can fade in the black while leaving the windows
unfaded, visible, but shrunk and rearranged.

svn path=/trunk/; revision=14

diff --git a/js/ui/main.js b/js/ui/main.js
index 150e1a9c018f167ed8f01df5df7fc5db0546b83e..56da058f24c50df29868c20e53ddf468b43ed377 100644 (file)
--- a/js/ui/main.js
+++ b/js/ui/main.js
@@ -4,11 +4,13 @@ const Shell = imports.gi.Shell;
 const Clutter = imports.gi.Clutter;
 
 const Panel = imports.ui.panel;
+const Overlay = imports.ui.overlay;
 
 const DEFAULT_BACKGROUND_COLOR = new Clutter.Color();
 DEFAULT_BACKGROUND_COLOR.from_pixel(0x2266bbff);
 
 let panel = null;
+let overlay = null;
 
 function start() {
     let global = Shell.global_get();
@@ -20,9 +22,25 @@ function start() {
 
     // Mutter currently hardcodes putting "Yessir. The compositor is running""
     // in the overlay. Clear that out.
-    children = global.overlay_group.get_children();
+    let children = global.overlay_group.get_children();
     for (let i = 0; i < children.length; i++)
        children[i].destroy();
 
     panel = new Panel.Panel();
+    overlay = new Overlay.Overlay();
+    global.set_stage_input_area(0, 0, global.screen_width, Panel.PANEL_HEIGHT);
+}
+
+function show_overlay() {
+    let global = Shell.global_get();
+
+    overlay.show();
+    global.set_stage_input_area(0, 0, global.screen_width, global.screen_height);
+}
+
+function hide_overlay() {
+    let global = Shell.global_get();
+
+    overlay.hide();
+    global.set_stage_input_area(0, 0, global.screen_width, Panel.PANEL_HEIGHT);
 }

diff --git a/js/ui/overlay.js b/js/ui/overlay.js
new file mode 100644 (file)
index 0000000..5504182
--- /dev/null
+++ b/js/ui/overlay.js
@@ -0,0 +1,47 @@
+/* -*- mode: js2; js2-basic-offset: 4; -*- */
+
+const Shell = imports.gi.Shell;
+const Clutter = imports.gi.Clutter;
+
+const Panel = imports.ui.panel;
+
+const OVERLAY_BACKGROUND_COLOR = new Clutter.Color();
+OVERLAY_BACKGROUND_COLOR.from_pixel(0x000000ff);
+
+function Overlay() {
+    this._init();
+}
+
+Overlay.prototype = {
+    _init : function() {
+       let global = Shell.global_get();
+
+       this._group = new Clutter.Group();
+       this.visible = false;
+
+       let background = new Clutter.Rectangle({ color: OVERLAY_BACKGROUND_COLOR,
+                                                reactive: true,
+                                                x: 0,
+                                                y: Panel.PANEL_HEIGHT,
+                                                width: global.screen_width,
+                                                height: global.screen_width - Panel.PANEL_HEIGHT });
+       this._group.add_actor(background);
+
+       this._group.hide();
+       global.overlay_group.add_actor(this._group);
+    },
+
+    show : function() {
+       if (!this.visible) {
+           this.visible = true;
+           this._group.show();
+       }
+    },
+
+    hide : function() {
+       if (this.visible) {
+           this.visible = false;
+           this._group.hide();
+       }
+    }
+};

diff --git a/js/ui/panel.js b/js/ui/panel.js
index 85fe95e1c27b6f55913084ec3a05b659562cbc9a..22fcafa3b688d46cfb8f9cd8d65aeb1e55c551b4 100644 (file)
--- a/js/ui/panel.js
+++ b/js/ui/panel.js
@@ -5,6 +5,11 @@ const Mainloop = imports.mainloop;
 const Shell = imports.gi.Shell;
 const Clutter = imports.gi.Clutter;
 
+// The mutual import here causes things to break in weird ways,
+//  (http://bugzilla.gnome.org/show_bug.cgi?id=558741)
+// So we do a local import below
+// const Main = imports.ui.main;
+
 const PANEL_HEIGHT = 32;
 const PANEL_BACKGROUND_COLOR = new Clutter.Color();
 PANEL_BACKGROUND_COLOR.from_pixel(0xeeddccff);
@@ -17,8 +22,6 @@ Panel.prototype = {
     _init : function() {
        let global = Shell.global_get();
 
-       global.set_stage_input_area(0, 0, global.screen_width, PANEL_HEIGHT);
-
        this._group = new Clutter.Group();
 
        let background = new Clutter.Rectangle({ color: PANEL_BACKGROUND_COLOR,
@@ -41,7 +44,14 @@ Panel.prototype = {
 
        message.connect('button-press-event',
            function(o, event) {
-               log('Clicked!');
+               // See comment above
+               let Main = imports.ui.main;
+
+               if (Main.overlay.visible)
+                   Main.hide_overlay();
+               else
+                   Main.show_overlay();
+
                return true;
             });